<template>
  <div class="article-wrapper">
    <header>
      <van-icon name="arrow-left" @click="goBack" />
      <van-cell :title="titleVisible ? 'hello' : ''" class="icon">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="ellipsis" />
        </template>
      </van-cell>
    </header>
    <div class="container" @scroll="onScroll">
      <section ref="header">
        <div class="title">{{ articleList.title }}</div>
        <div class="info">
          {{ getTimeStr(articleList.pubdate) }} |
          {{ articleList.read_count }}阅读 | {{ articleList.comm_count }}评论
        </div>
      </section>
      <!-- 用户信息部分 -->
      <div class="user-wrapper">
        <img :src="articleList.aut_photo" class="avatar" />
        <div class="nickname">{{ articleList.aut_name }}</div>
        <div
          :class="!articleList.is_followed ? 'follow-btn' : 'follow-btn active'"
          @click="
            follow(
              articleList.is_followed ? 'cancelFollowAuthor' : 'followAuthor',
              articleList.aut_id
            )
          "
        >
          {{ !articleList.is_followed ? "+ 关注" : "已关注" }}
        </div>
      </div>
      <!-- 文章内容部分 -->
      <div class="content">
        <div v-html="articleList.content"></div>
        <div class="release-time">
          <div></div>
          <div>发布文章时间：{{ getTimeStr(articleList.pubdate) }}</div>
        </div>
      </div>
      <!-- 评论内容部分 -->
      <div class="comment-title">
        <div class="comment">全部评论({{ articleList.comm_count }})</div>
        <div class="like">{{ articleList.like_count }}点赞</div>
      </div>
      <!-- 评论内容 -->
      <div class="comment-wrapper" v-if="commentList[0]">
        <comment-list
          :mode="'default'"
          v-for="item in commentList"
          :key="item.id"
          :avatar="item.aut_photo"
          :content="item.content"
          :likeCount="item.like_count"
          :nickname="item.aut_name"
          :timeStr="item.pubdate"
          :replayCount="item.reply_count"
          :id="item.com_id"
          :isLiking="item.is_liking"
          :isFollowed="item.is_followed"
          :autId="item.aut_id"
          @likeComment="
            onLikeComment(
              !item.is_liking ? 'toLikeComment' : 'cancelLikeComment',
              item.com_id
            )
          "
          @getReplyCommentList="getReplyCommentList(item)"
        ></comment-list>
        <div class="no-more">没有更多了</div>
      </div>
      <!-- 没有评论 -->
      <van-empty description="还没有人评论哦" v-else />
    </div>
    <!-- 底部 -->
    <footer>
      <div class="comment-wrapper" @click="goCommentPage">
        <van-icon name="arrow-left" />
        <input type="text" name="" id="" placeholder="抢沙发" disabled />
      </div>
      <div class="function-zone">
        <div class="item">
          <van-icon name="comment-o" class="icon">
            <div class="comment-count">{{ articleList.comm_count }}</div>
          </van-icon>
          <div>评论</div>
        </div>
        <div
          class="item"
          @click="
            operateArticle(
              articleList.attitude !== 1 ? 'toLikeArticle' : 'cancelLikeArticle'
            )
          "
        >
          <van-icon
            name="star-o"
            :class="articleList.attitude !== 1 ? 'icon' : 'icon active'"
          />
          <div>点赞</div>
        </div>
        <div
          class="item"
          @click="
            operateArticle(
              !articleList.is_collected
                ? 'articleCollect'
                : 'cancelArticleCollect'
            )
          "
        >
          <van-icon
            name="like-o"
            :class="!articleList.is_collected ? 'icon' : 'icon active'"
          />
          <div>收藏</div>
        </div>
        <div class="item" @click="showSharePopup">
          <van-icon name="more-o" class="icon"> </van-icon>
          <div>分享</div>
        </div>
      </div>
    </footer>
    <!-- 分享页面弹出层 -->
    <van-popup v-model="isShowSharePopup" position="bottom" closeable>
      <div class="share-popup">立即分享给好友</div>
    </van-popup>
    <!-- 回复评论页面弹出层 -->
    <van-popup v-model="isReplyCommentPopup" position="right">
      <div class="replay-popup">
        <!-- 导航 -->
        <van-nav-bar
          :title="`${commentInfo.reply_count}条回复`"
          left-arrow
          @click-left="showReplyCommentPopup"
        />
        <template>
          <div class="comment-list">
            <div class="comment">
              <img
                :src="commentInfo.aut_photo"
                alt=""
                crossorigin="anonymous"
              />
              <div class="info-wrapper">
                <div class="info">
                  <div class="nickname">{{ commentInfo.aut_name }}</div>
                  <div
                    :class="
                      !commentInfo.is_followed ? 'follow' : 'follow active'
                    "
                    @click="
                      follow1(
                        commentInfo.is_followed
                          ? 'cancelFollowAuthor'
                          : 'followAuthor',
                        commentInfo.aut_id
                      )
                    "
                  >
                    {{ !commentInfo.is_followed ? "关注" : "已关注" }}
                  </div>
                </div>
                <div class="content">
                  <!-- 普通评论 -->
                  <span>{{ commentInfo.content }}</span>
                  <div class="replay">
                    <span>{{ getCommentTime(commentInfo.pubdate) }}</span>
                    <div class="star">
                      <span>{{ commentInfo.like_count }}</span>
                      <van-icon
                        class="icon"
                        name="good-job-o"
                        @click="
                          onLikeComment(
                            !commentInfo.is_liking
                              ? 'toLikeComment'
                              : 'cancelLikeComment',
                            commentInfo.com_id
                          )
                        "
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <!-- 评论内容 -->
        <div class="comment-wrapper" v-if="replyCommentList[0]">
          <comment-list
            v-for="item in replyCommentList"
            :key="item.id"
            :avatar="item.aut_photo"
            :content="item.content"
            :likeCount="item.like_count"
            :nickname="item.aut_name"
            :timeStr="item.pubdate"
            :replayCount="item.reply_count"
            :id="item.com_id"
            :isLiking="item.is_liking"
            :isFollowed="item.is_followed"
            :autId="item.aut_id"
            @likeComment="
              onLikeReplyComment(
                !item.is_liking ? 'toLikeComment' : 'cancelLikeComment',
                item.com_id
              )
            "
          ></comment-list>
          <div class="no-more">没有更多了</div>
        </div>
        <!-- 没有评论 -->
        <van-empty description="还没有人评论哦" v-else />
      </div>
    </van-popup>
  </div>
</template>
<script>
import moment from "moment";
import { mapState, mapActions } from "vuex";
import * as articlePage from "@/api/article-page";
import "highlight.js/styles/vs2015.css";
let headerHeight = 0;
export default {
  data() {
    return {
      value: "",
      // 每一条文章回复信息
      commentInfo: {},
      // 分享页面弹出层是否显示
      isShowSharePopup: false,
      // 回复评论页面弹出层是否显示
      isReplyCommentPopup: false,
      // 头部中间部分是否显示
      titleVisible: false,
    };
  },
  computed: {
    ...mapState("articlePage", [
      "articleList",
      "commentList",
      "replyCommentList",
    ]),
  },
  methods: {
    ...mapActions("articlePage", [
      "updateArticleList",
      "updateCommentList",
      "updateReplyCommentList",
    ]),
    // 是否显示分享页面弹出层
    showSharePopup() {
      this.isShowSharePopup = true;
    },
    showReplyCommentPopup() {
      this.isReplyCommentPopup = !this.isReplyCommentPopup;
    },
    // 回到前网页
    goBack() {
      this.$router.go(-1);
    },
    // 评论时间处理
    getCommentTime(timeStr) {
      return moment(timeStr).toNow(true) + "内";
    },
    // 文章创建时间处理
    getTimeStr(time) {
      return moment(time).format("YYYY年MM月DD日");
    },
    // 是否关注文章作者
    async follow(type, id) {
      const msg = await articlePage[type](id);
      this.$toast(msg);
      // 关注完 刷新文章信息
      await this.updateArticleList(this.$route.query.id);
    },
    // 是否关注评论作者
    async follow1(type, id) {
      const msg = await articlePage[type](id);
      this.$toast(msg);
      await this.updateCommentList(this.$route.query.id);
    },
    // // 关注作者
    // async toFollow(id) {
    //   const res = await articlePage.followAuthor(id);
    //   await this.updateArticleList(this.$route.query.id);
    //   this.$notify({
    //     type: res ? "success" : "danger",
    //     message: res.status === 201 ? "已关注" : "关注失败",
    //   });
    // },
    // // 取消关注作者
    // async toCancelFollow(id) {
    //   const res = await articlePage.cancelFollowAuthor(id);
    //   await this.updateArticleList(this.$route.query.id);
    //   this.$notify({
    //     type: res ? "success" : "danger",
    //     message: res.status === 204 ? "已取消关注" : "取消关注失败",
    //   });
    // },

    // 对评论点赞
    async onLikeComment(type, id) {
      const msg = await articlePage[type](id);
      this.$toast(msg);
      this.updateCommentList(this.$route.query.id);
    },
    // 对回复评论点赞
    async onLikeReplyComment(type, id) {
      const msg = await articlePage[type](id);
      this.$toast(msg);
      this.updateReplyCommentList(this.commentInfo.com_id);
    },
    // 收藏、点赞文章
    async operateArticle(type) {
      const msg = await articlePage[type](this.$route.query.id);
      this.$toast(msg);
      this.updateArticleList(this.$route.query.id);
    },
    // 去评论页面
    goCommentPage() {
      this.$router.push({
        path: "/comment-page",
        query: {
          id: this.$route.query.id,
        },
      });
    },
    // 头部滚动条事件
    onScroll(e) {
      this.titleVisible = e.target.scrollTop > headerHeight;
    },
    // 显示回复列表弹出层并获取回复评论列表
    async getReplyCommentList(item) {
      this.isReplyCommentPopup = true;
      this.commentInfo = item;
      await this.updateReplyCommentList(this.commentInfo.com_id);
    },
  },
  async created() {
    // 获取新闻详情
    await this.updateArticleList(this.$route.query.id);
    // 获取评论列表
    await this.updateCommentList(this.$route.query.id);
  },
};
</script>

<style lang="less" scoped>
@import url("highlight.js/styles/dark.css");
// 最外层盒子
.article-wrapper {
  font-size: 16px;
  color: #333;
  width: 100vw;
  height: 100vh;
  padding: 0 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  // 头部
  header {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    .icon {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  // 中间部分
  .container {
    flex: 1;
    overflow-y: auto;
    // 标题部分
    section {
      margin-top: 16px;
      font-size: 24px;
      .info {
        margin-top: 8px;
        font-size: 14px;
        color: #999;
      }
    }
    // 用户信息
    .user-wrapper {
      padding: 24px 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      border-bottom: 1px solid #eee;
      background-color: #fff;
      .avatar {
        display: block;
        object-fit: cover;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 8px;
      }
      .nickname {
        flex: 1;
      }
      .follow-btn {
        width: 80px;
        height: 40px;
        color: #fff;
        font-size: 16px;
        background-color: #fc6627;
        border-radius: 20px;
        line-height: 40px;
        text-align: center;
      }
      .follow-btn.active {
        background-color: #fff;
        color: #333;
        border: 1px solid #eee;
        box-sizing: border-box;
      }
    }
    // 文章内容部分
    .content {
      margin-top: 16px;
      .release-time {
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        color: #666;
        font-size: 14px;
      }
    }
    // 评论内容部分
    .comment-wrapper {
      width: 100%;
      .no-more {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #666;
      }
    }
    // 评论标题部分
    .comment-title {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      height: 40px;
      align-items: center;
      .like {
        color: #666;
        font-size: 14px;
      }
    }
  }
  // 底部
  footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    .comment-wrapper {
      width: 50%;
      height: 40px;
      display: flex;
      align-items: center;
      background-color: #eee;
      border-radius: 20px;
      padding: 0 8px;
      box-sizing: border-box;
      input {
        border: none;
        width: 85%;
        background-color: #eee;
      }
    }
    .function-zone {
      display: flex;
      flex: 1;
      height: 100%;
      justify-content: space-around;
      align-items: center;
      background-color: #fff;
      .item {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #3a3a3a;
        .icon {
          position: relative;
          margin: 4px 0;
          font-size: 20px;
          .comment-count {
            position: absolute;
            top: -2px;
            right: -2px;
            font-size: 10px;
            color: #fff;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            line-height: 15px;
            text-align: center;
            background-color: #fc6627;
          }
        }
        .icon.active {
          color: #fc6627;
        }
      }
    }
  }
  // 分享页面遮罩层
  .share-popup {
    width: 100vw;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // 回复评论页面弹出层
  .replay-popup {
    width: 100vw;
    height: 100vh;
    // 评论内容部分
    .comment-wrapper {
      width: 100%;
      .no-more {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #666;
      }
    }
    .comment {
      display: flex;
      padding: 16px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      > img {
        display: block;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        margin-right: 8px;
        margin-top: 2px;
      }
      .info-wrapper {
        flex: 1;
        padding: 8px;
        .info {
          display: flex;
          .nickname {
            flex: 1;
            color: #666;
          }
          .follow {
            color: #fc6627;
          }
          .follow.active {
            color: #333;
          }
        }
        .content {
          margin-top: 20px;
          .replay {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .star {
              font-size: 14px;
              .icon {
                font-size: 20px;
                margin-left: 4px;
              }
              .icon.active {
                color: #fc6627;
              }
            }
            span {
              color: #666;
              font-size: 15px;
            }
          }
        }
      }
    }
  }
}
</style>